<template>
  <div>
    <div class="recommend" v-if="!sh">
      <section class="recom">
        <RecomTitle>编辑推荐</RecomTitle>
        <ul>
          <RecomCard
            v-for="item in dataList"
            :key="item.id"
            :item="item"
          ></RecomCard>
        </ul>
      </section>
      <section class="newMusic">
        <RecomTitle>最新音乐</RecomTitle>
        <ul>
          <RecomItem
            @click.native="
              $emit('update:currentSong', item);
              $emit('update:playlist', newmusic);
            "
            v-for="item in newmusic"
            :key="item.id"
            :item="item"
            :currentSong="currentSong"
            :playing="playing"
          ></RecomItem>
        </ul>
      </section>
      <!-- <footer>
        <HomeFooter></HomeFooter>
      </footer> -->
    </div>
    <LoadingView v-if="sh"></LoadingView>
  </div>
</template>

<script>
import RecomTitle from "@/components/RecomTitle.vue";
import RecomCard from "@/components/RecomCard.vue";
import RecomItem from "@/components/RecomItem.vue";
import LoadingView from "@/components/LoadingView.vue";
// import HomeFooter from "@/components/HomeFooter.vue";

export default {
  props: {
    currentSong: Object,
    playing: Boolean,
  },
  components: {
    RecomTitle,
    RecomCard,
    RecomItem,
    // HomeFooter,
    LoadingView,
  },
  data: function () {
    return {
      dataList: [],
      newmusic: [],
      sh:true,
    };
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/personalized?limit=6")
      .then((res) => {
        this.dataList = res.data.result;
      });
    this.axios
      .get("https://apis.netstart.cn/music/personalized/newsong")
      .then((res) => {
        this.newmusic = res.data.result;
      });

      setTimeout(()=>this.sh=false,100)
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.recom {
  padding-top: 20px;
  ul {
    display: flex;
    flex-wrap: wrap;
  }
}
.newMusic {
  ul {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}
</style>
